import textColorClass from "@/assets/ts/text_color_class"
import ItemMoudle from "@/components/common/ItemModule"
import TitleMain from "@/components/common/TitleMain"
import type { AnyObject } from "antd/es/_util/type"
import type { ReactNode } from "react"


type DefaultPro = {
  label: string | ReactNode
  value: string | ReactNode
  leftNum: string | ReactNode
  rightNum: string | ReactNode
}

type ItemNodeProps<T> = {
  dataSource: T
  textLeft?: string | ReactNode
  textRight?: string | ReactNode
  objDefault?: {
    [key in keyof DefaultPro]: keyof T
  }
}

type ItemOption = {
  type: string
  num: number
  handled: number
  notDisposed: number

}
const option: ItemOption[] = [
  {
    type: '移动',
    num: 37,
    handled: 43,
    notDisposed: 28
  },
  {
    type: '电信',
    num: 37,
    handled: 43,
    notDisposed: 28
  },
  {
    type: '联通',
    num: 37,
    handled: 43,
    notDisposed: 28
  },

]




const ItemNode = <T extends AnyObject>({
  dataSource,
  textLeft = '已处置',
  textRight = '待处置',
  objDefault = {
    label: 'label',
    value: 'value',
    leftNum: 'leftNum',
    rightNum: 'rightNum',
  } }: ItemNodeProps<T>) => {
  return <div className="text-center flex flex-col justify-between gap-[8px]">
    <div className="w-[110px] h-[96px] bg-[url(@/assets/svg/DisposalSituation-1.svg)] bg-no-repeat bg-auto bg-position-[-16px_4px] flex flex-col items-center">
      <div className={`${textColorClass.text_default} text-[24px] font-bold`}>{dataSource[objDefault.value] || 0}</div>
      <div className={`${textColorClass.text_default} text-[12px]`}>{dataSource[objDefault.label] || ''}</div>
    </div>
    <div>
      <div className={`${textColorClass.text_default} text-[18px] font-bold`}>
        {dataSource[objDefault.leftNum] || 0} / {dataSource[objDefault.rightNum] || 0}
      </div>
      <div className={`${textColorClass.text_default} text-[12px]`}>
        {textLeft} / {textRight}
      </div>
    </div>
  </div>
}

const DisposalSituation = () => {
  return <ItemMoudle
    className="w-[384px]"
    childClassName="h-[190px] flex items-center justify-between"
    header={
      <TitleMain title="处置情况" />
    }
  >

    {
      option.map((item, index) => {
        return <ItemNode<ItemOption>
          key={index}
          objDefault={{
            label: 'type',
            value: 'num',
            leftNum: 'handled',
            rightNum: 'notDisposed'
          }}
          dataSource={item}
        />
      })
    }
  </ItemMoudle>

}

export default DisposalSituation